<template>
  <div>
    <input type="text" @keydown.enter="handleEnter" v-model="value"/><br>
    <List :list="list2">
      <h1>正在进行</h1>
    </List>

    <List :list="list1">
      <h1>已经完成</h1>
    </List>

    <h1>{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import List from "@/components/List";
import { mapGetters, mapMutations, mapActions, mapState } from 'vuex'
export default {
  name: "App",
  data() {
    return {
      value: ''
    }
  },
  computed: {
    ...mapGetters(['list1', 'list2']),
    ...mapState('car',['count']),
    // ...mapGetters({
    //   a: 'list1',
    //   b: 'list2',
    // })

    // list1() {
    //   return this.$store.getters.list1
    // },
    // list2() {
    //   return this.$store.getters.list2
    // }
  },
  components: {
    List
  },
  methods: {
    ...mapMutations(['ADD_LIST']),
    ...mapMutations('car',['increment']),
    ...mapActions(['GET_LIST']),
    handleEnter() {
      var obj = {
        isChecked: false,
        id: new Date().getTime(),
        title: this.value
      }

      // this.$store.commit('ADD_LIST', obj)
      this.ADD_LIST(obj)

      this.value = ''
    }
  },
  created() {
    // this.$store.dispatch('GET_LIST')
    this.$store.state.list.length ===  0 && this.GET_LIST()
  }
};
</script>